CSS ๋ฒ์ ๊ท์น์ ๋ง์คํฐํ์ฌ ์คํ์ผ ์บก์ํ์ ์ปดํฌ๋ํธ ๊ฒฉ๋ฆฌ๋ฅผ ํตํด ์ ์ง๋ณด์ ๋ฐ ํ์ฅ์ด ์ฉ์ดํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ์ธ์. ๊ธ๋ก๋ฒ ์์ ์ ํจ๊ป ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐฐ์๋๋ค.
CSS ๋ฒ์ ๊ท์น: ์คํ์ผ ์บก์ํ์ ์ปดํฌ๋ํธ ๊ฒฉ๋ฆฌ
๋์์์ด ์งํํ๋ ์น ๊ฐ๋ฐ ํ๊ฒฝ์์ CSS ์คํ์ผ์ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๊ฒ์ ์ ์ง๋ณด์, ํ์ฅ ๋ฐ ํ์ ์ด ์ฉ์ดํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๊ฐ๋ฐ์๊ฐ ์ง๋ฉดํ๋ ๊ฐ์ฅ ํฐ ๊ณผ์ ์ค ํ๋๋ ์คํ์ผ ์ถฉ๋์ ๋ฐฉ์งํ๊ณ ์คํ์ผ์ด ์๋ํ ์ปดํฌ๋ํธ์๋ง ์ ์ฉ๋๋๋ก ๋ณด์ฅํ๋ ๊ฒ์ ๋๋ค. ๋ฐ๋ก ์ด ์ง์ ์์ CSS ๋ฒ์ ๊ท์น์ด๋ผ๋ ๊ฐ๋ ์ด ๋ฑ์ฅํฉ๋๋ค.
๋ฌธ์ ์ดํดํ๊ธฐ: CSS ๋ช ์์ฑ๊ณผ ์ ์ญ ์คํ์ผ
์ ํต์ ์ผ๋ก CSS๋ ์ ์ญ ๋ฒ์์์ ์๋ํฉ๋๋ค. ์ด๋ ๋ชจ๋ ์คํ์ผ ์ ์ธ์ด ๋ฌธ์ ์ ์ฒด์ ๋ชจ๋ ์์์ ์ ์ฌ์ ์ผ๋ก ์ํฅ์ ๋ฏธ์น ์ ์์์ ์๋ฏธํฉ๋๋ค. ์ฒ์์๋ ๊ฐ๋จํด ๋ณด์ด๋ ์ด ์ ์ญ์ ํน์ฑ์ ๊ธ์ธ ๋ค์ํ ๋ฌธ์ ๋ก ์ด์ด์ง ์ ์์ต๋๋ค:
- ๋ช ์์ฑ ์ถฉ๋: ์คํ์ผ์ํธ์ ๋ท๋ถ๋ถ์ ์ ์๋๊ฑฐ๋ ๋ ๋์ ๋ช ์์ฑ์ ๊ฐ์ง ์คํ์ผ์ด ์ด์ ์ ์ ์๋ ์คํ์ผ์ ์๋์น ์๊ฒ ๋ฎ์ด์ฐ๊ฒ ๋์ด ๋๋ฒ๊น ์ ์ ๋ชฝ์ผ๋ก ๋ง๋ค ์ ์์ต๋๋ค.
- ์๋ํ์ง ์์ ๋ถ์์ฉ: ๋ ๋ฆฝ์ ์ผ๋ก ๋ณด์ด๋ ์ปดํฌ๋ํธ์ ์ ์ฉ๋ ๋ณ๊ฒฝ ์ฌํญ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ์๊ธฐ์น ์๊ฒ ์ํฅ์ ์ค ์ ์์ต๋๋ค.
- ์ฝ๋ ๋ณต์ก์ฑ ์ฆ๊ฐ: ๋๊ท๋ชจ ํ๋ก์ ํธ์ ๋ณต์กํ CSS ๊ด๋ฆฌ๋ ์ฝ๋๋ฒ ์ด์ค๊ฐ ์ปค์ง์๋ก ์ ์ ๋ ์ด๋ ค์์ง๋๋ค. ์คํ์ผ์ด ์ด๋์ ์ ์ฉ๋๊ณ ๋ค๋ฅธ ์คํ์ผ๊ณผ ์ด๋ป๊ฒ ์ํธ ์์ฉํ๋์ง ํ์ ํ๊ธฐ๊ฐ ๋ ํ๋ค์ด์ง๋๋ค.
- ์ด๋ ค์ด ํ์ : ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ๋์ผํ ํ๋ก์ ํธ์์ ์์ ํ ๋ CSS์ ์ ์ญ์ ํน์ฑ์ ์คํ์ผ ์ถฉ๋์ ์ํ์ ๋์ด๋ฉฐ, ์ถฉ๋์ ํผํ๊ธฐ ์ํด ์ธ์ฌํ ์ํต์ด ํ์ํฉ๋๋ค.
์ฌ๋ฌ ๋๋ฅ์ ํฉ์ด์ ธ ์๋ ๊ฐ๋ฐ์๋ค์ด ๊ฐ๊ธฐ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๋ฉฐ ๊ธ๋ก๋ฒ ์ด์ปค๋จธ์ค ํ๋ซํผ์์ ์์ ํ๋ ํ์ ์์ํด ๋ณด์ญ์์ค. ๋ฒ์ ์ง์ ์ ๋ํ ๊ฒฌ๊ณ ํ ์ ๊ทผ ๋ฐฉ์์ด ์๋ค๋ฉด, ์ถฉ๋ํ๋ ์คํ์ผ์ด ์ฌ์ฉ์ ๊ฒฝํ์ ์ํฅ์ ๋ฏธ์น ๊ฐ๋ฅ์ฑ์ด ๊ธ๊ฒฉํ ์ฆ๊ฐํฉ๋๋ค.
CSS ๋ฒ์ ๊ท์น: ์คํ์ผ ์บก์ํ๋ฅผ ์ํ ํด๊ฒฐ์ฑ
CSS ๋ฒ์ ๊ท์น์ ์คํ์ผ์ ์ ์ฉ์ ์ ํํ๋ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํ์ฌ, ์น ํ์ด์ง์ ํน์ ์ปดํฌ๋ํธ๋ ์์ญ ๋ด์ ์คํ์ผ์ ์บก์ํํฉ๋๋ค. ๋ช ๊ฐ์ง ๊ธฐ์ ๊ณผ ๊ธฐ๋ฒ์ด ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ฉฐ, ๊ฐ๊ฐ ์ฅ๋จ์ ์ด ์์ต๋๋ค. ์ฃผ์ ์ ๊ทผ ๋ฐฉ์์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. CSS ๋ชจ๋
CSS ๋ชจ๋์ ์คํ์ผ ์บก์ํ๋ฅผ ๋ฌ์ฑํ๊ธฐ ์ํ ๋์ค์ ์ด๊ณ ํจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. CSS ํ์ผ์ ๋ชจ๋ ๋จ์๋ก ๋ณํํ์ฌ ๊ฐ ์คํ์ผ ๊ท์น์ ๋ํด ๊ณ ์ ํ ํด๋์ค ์ด๋ฆ์ ์๋์ผ๋ก ์์ฑํฉ๋๋ค. ์ด๋ ๊ฒ ์์ฑ๋ ํด๋์ค ์ด๋ฆ์ ํด๋น ์ปดํฌ๋ํธ์ HTML ๋๋ JavaScript ๋ด์์ ์ฌ์ฉ๋์ด ์คํ์ผ์ด ๋ก์ปฌ ๋ฒ์๋ก ์ง์ ๋๋๋ก ๋ณด์ฅํฉ๋๋ค.
CSS ๋ชจ๋์ ์๋ ๋ฐฉ์:
- ํ์ผ ๊ตฌ์ฑ: ๊ฐ ์ปดํฌ๋ํธ๋ ์ผ๋ฐ์ ์ผ๋ก ์ ์ฉ CSS ๋ชจ๋ ํ์ผ์ ๊ฐ์ง๋๋ค (์: `Button.module.css`).
- ๊ณ ์ ํด๋์ค ์ด๋ฆ ์์ฑ: CSS ๋ชจ๋์ ์ปดํฌ๋ํธ๋ก ๊ฐ์ ธ์ค๋ฉด ๋น๋ ํ๋ก์ธ์ค(Webpack ๋๋ Parcel ๋ฑ)๊ฐ ๊ฐ ์ ํ์์ ๋ํด ๊ณ ์ ํ ํด๋์ค ์ด๋ฆ์ ์์ฑํฉ๋๋ค (์: `.button`์ด `.Button_button__12345`๊ฐ ๋จ).
- ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ์ฌ์ฉ: ์์ฑ๋ ํด๋์ค ์ด๋ฆ์ ์ปดํฌ๋ํธ ๋ด์์ ๊ฐ์ ธ์ ํด๋น HTML ์์์ ์ ์ฉ๋ฉ๋๋ค.
์์ (์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ, ์: React):
Button.module.css:
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Button.js (React ์ปดํฌ๋ํธ):
import React from 'react';
import styles from './Button.module.css';
function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}
export default Button;
์ด ์์ ์์ `styles.button` ํด๋์ค ์ด๋ฆ์ ๋ฒํผ ์ปดํฌ๋ํธ์ ๊ณ ์ ํ๋ฏ๋ก ๋ค๋ฅธ CSS ํ์ผ๊ณผ์ ์คํ์ผ ์ถฉ๋์ ๋ฐฉ์งํฉ๋๋ค. ์ผ๋ณธ, ์ธ๋, ๋ธ๋ผ์ง์ ๊ฐ๋ฐ์๋ค์ด ๋ชจ๋ ์์ ์ ์คํ์ผ ๋ณ๊ฒฝ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค๋ฅธ ๋ถ๋ถ์ ์ํฅ์ ๋ฏธ์น์ง ์์ ๊ฒ์ด๋ผ๋ ํ์ ์ ๊ฐ์ง๊ณ ๋์ผํ ๋ฒํผ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค.
CSS ๋ชจ๋์ ์ฅ์ :
- ๋ฐ์ด๋ ์บก์ํ: ์คํ์ผ์ด ๊ฒฉ๋ฆฌ๋์ด ์ถฉ๋ ์ํ์ด ์ค์ด๋ญ๋๋ค.
- ์ ์ง๋ณด์์ฑ: ๊ฐ๋ณ ์ปดํฌ๋ํธ์ ์คํ์ผ์ ๋ ์ฝ๊ฒ ์ดํดํ๊ณ ์์ ํ ์ ์์ต๋๋ค.
- ๊ตฌ์ฑ ๊ฐ๋ฅ์ฑ: CSS ๋ชจ๋์ ๋ค๋ฅธ ๋ชจ๋๊ณผ ์ฝ๊ฒ ๊ฒฐํฉํ๊ณ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
- ๋๊ตฌ ์ง์: ๋น๋ ๋๊ตฌ ๋ฐ ํ๋ ์์ํฌ์์ ๋๋ฆฌ ์ง์๋ฉ๋๋ค.
CSS ๋ชจ๋์ ๊ณ ๋ ค ์ฌํญ:
- ์ถ๊ฐ ๋น๋ ๋จ๊ณ: ๊ณ ์ ํ ํด๋์ค ์ด๋ฆ์ ์์ฑํ๊ธฐ ์ํด ๋น๋ ํ๋ก์ธ์ค๊ฐ ํ์ํฉ๋๋ค.
- ํ์ต ๊ณก์ : ์ดํดํ๊ณ ๊ตฌํํ๋ ๋ฐ ์ฝ๊ฐ์ ์ด๊ธฐ ๋ ธ๋ ฅ์ด ํ์ํ ์ ์์ต๋๋ค.
2. Shadow DOM
Shadow DOM์ ์น ์ปดํฌ๋ํธ ๋ด์ ๊ฒฉ๋ฆฌ๋ DOM ํธ๋ฆฌ๋ฅผ ์์ฑํ๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. Shadow DOM ๋ด์ ์ ์๋ ์คํ์ผ์ ์์ ํ ์บก์ํ๋์ด ์ธ๋ถ๋ก ์ ์ถ๋์ง ์์ผ๋ฉฐ, Shadow DOM ์ธ๋ถ์์ ์ ์๋ ์คํ์ผ์ ๊ทธ ์์ ์์์ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
Shadow DOM์ ์๋ ๋ฐฉ์:
- Shadow Root ์์ฑ: DOM ์์์ shadow root๊ฐ ์ฐ๊ฒฐ๋ฉ๋๋ค.
- DOM ๊ตฌ์กฐ: ์น ์ปดํฌ๋ํธ์ ๋ด๋ถ ๊ตฌ์กฐ(HTML, CSS, JavaScript)๋ shadow root ๋ด์ ์ ์๋ฉ๋๋ค.
- ์คํ์ผ ์บก์ํ: shadow root ๋ด์ ์ ์ฉ๋ ์คํ์ผ์ ํด๋น ์ปดํฌ๋ํธ๋ก ๋ฒ์๊ฐ ์ง์ ๋๋ฉฐ, shadow root ์ธ๋ถ์ ์คํ์ผ์ ์ํฅ์ ์ฃผ๊ฑฐ๋ ๋ฐ์ง ์์ต๋๋ค.
์์ (์น ์ปดํฌ๋ํธ):
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.container {
padding: 20px;
background-color: #f0f0f0;
}
</style>
<div class="container">
<p>Hello from my component!</p>
</div>
`;
}
}
customElements.define('my-component', MyComponent);
์ด ์์ ์์ `<style>` ํ๊ทธ ๋ด์ ์ ์๋ `.container` ์คํ์ผ์ `MyComponent`๋ก ๋ฒ์๊ฐ ์ง์ ๋๋ฉฐ ํ์ด์ง์ ๋ค๋ฅธ ์์์ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค. ์ด๊ฒ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฒด์์ ์ ์ญ์ ์ผ๋ก ์ฌ์ฉ๋์ด ๋ชจ๋ ์ปดํฌ๋ํธ๊ฐ ๊ฒฉ๋ฆฌ๋๋๋ก ๋ณด์ฅํ๋ค๊ณ ์์ํด ๋ณด์ญ์์ค.
Shadow DOM์ ์ฅ์ :
- ๊ฐ์ฅ ๊ฐ๋ ฅํ ์บก์ํ: ๊ฐ์ฅ ๊ฒฌ๊ณ ํ ์คํ์ผ ๊ฒฉ๋ฆฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- ๋ค์ดํฐ๋ธ ๋ธ๋ผ์ฐ์ ์ง์: ์ต์ ๋ธ๋ผ์ฐ์ ์ ๋ด์ฅ๋์ด ์์ต๋๋ค (๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๊ตฌํ์๋ ๋น๋ ๋จ๊ณ๊ฐ ํ์ ์์).
- ์น ์ปดํฌ๋ํธ ํธํ์ฑ: ์ฌ๋ฌ ํ๋ก์ ํธ์์ ์ฌ์ฉํ ์ ์๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์น ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๋ ๋ฐ ์ด์์ ์ ๋๋ค.
Shadow DOM์ ๊ณ ๋ ค ์ฌํญ:
- ํ์ต ๊ณก์ : ์น ์ปดํฌ๋ํธ์ Shadow DOM ๊ฐ๋ ์ ๋ํ ์ดํด๊ฐ ํ์ํฉ๋๋ค.
- ์คํ์ผ ์ปค์คํฐ๋ง์ด์ง: ์ธ๋ถ์์ Shadow DOM ์ปดํฌ๋ํธ์ ์คํ์ผ์ ์ฌ์ฉ์ ์ ์ํ๋ ๊ฒ์ด ๋ ๋ณต์กํ ์ ์์ต๋๋ค. CSS ์ฌ์ฉ์ ์ง์ ์์ฑ๊ณผ `::part` ๋ฐ `::shadow`๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ด๋ ์ฌ์ฉ์ ์ ์๋ฅผ ํ์ฉํ๋ ๊ธฐ์ ์ด ์์ต๋๋ค.
3. CSS ๋ค์ด๋ฐ ์ปจ๋ฒค์
์ง์ ์ ์ธ ๋ฒ์ ๊ท์น์ ์๋์ง๋ง, BEM (Block, Element, Modifier)๊ณผ ๊ฐ์ CSS ๋ค์ด๋ฐ ์ปจ๋ฒค์ ์ ์คํ์ผ ์บก์ํ์ ์ ์ง๋ณด์์ฑ์ ํฌ๊ฒ ๊ธฐ์ฌํ ์ ์์ต๋๋ค. ์ด๋ CSS ํด๋์ค ์ด๋ฆ ์ง์ ์ ๊ตฌ์กฐํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํ์ฌ ์คํ์ผ๊ณผ HTML ์์ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ๊ฒ ํ๊ณ , ๊ฒฐ๊ณผ์ ์ผ๋ก ์คํ์ผ ์ถฉ๋ ๊ฐ๋ฅ์ฑ์ ์ค์ฌ์ค๋๋ค.
BEM์ ์๋ ๋ฐฉ์:
- Block: ๋ ๋ฆฝ์ ์ธ ์ปดํฌ๋ํธ๋ฅผ ๋ํ๋ ๋๋ค (์: `header`, `button`).
- Element: ๋ธ๋ก์ ์ผ๋ถ๋ฅผ ๋ํ๋ ๋๋ค (์: `header__logo`, `button__text`).
- Modifier: ๋ธ๋ก ๋๋ ์์์ ๋ณํ์ ๋ํ๋ ๋๋ค (์: `button--primary`, `button--disabled`).
์์ (BEM):
HTML:
<button class="button button--primary">
<span class="button__text">Click Me</span>
</button>
CSS:
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button--primary {
background-color: #28a745;
}
.button__text {
font-weight: bold;
}
BEM์ ์ฌ์ฉํ๋ฉด ๊ฐ๋ฐ์๋ ์ด๋ค ์คํ์ผ์ด ์ด๋ค ์ปดํฌ๋ํธ์ ์ ์ฉ๋๋์ง ์ ์ํ๊ฒ ์ดํดํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด ๋ ์ผ์ ๊ฐ๋ฐ์๊ฐ BEM์ ์ฌ์ฉํ์ฌ ์ ์๋ ์์๋ฅผ ์์ ํ๋ ๊ฒฝ์ฐ, ์คํ์ผ์ด ์ด๋์ ์ ์ฉ๋๋์ง ์ ์ํ๊ฒ ํ์ ํ๊ณ ๋ค๋ฅธ ์์์ ์คํ์ผ์ ์ฐ๋ฐ์ ์ผ๋ก ์์ ํ๋ ๊ฒ์ ํผํ ์ ์์ต๋๋ค.
BEM ๋ฐ ๋ค์ด๋ฐ ์ปจ๋ฒค์ ์ ์ฅ์ :
- ๊ฐ๋ ์ฑ ํฅ์: CSS์ HTML์ ๊ตฌ์กฐ๋ฅผ ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์ต๋๋ค.
- ์ถฉ๋ ๊ฐ์: ์ด๋ฆ ์ถฉ๋์ ๋ฐฉ์งํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- ์ ์ง๋ณด์์ฑ: ์คํ์ผ ์์ ๋ฐ ๋๋ฒ๊น ์ ๋จ์ํํฉ๋๋ค.
- ํ์ฅ์ฑ: ๋๊ท๋ชจ ํ๋ก์ ํธ์ ํ์ ์ ์๋ํฉ๋๋ค.
๋ค์ด๋ฐ ์ปจ๋ฒค์ ์ ๊ณ ๋ ค ์ฌํญ:
- ํ์ต ๊ณก์ : ์ ํํ ์ปจ๋ฒค์ (์: BEM, SMACSS ๋ฑ)์ ๋ํ ์ดํด์ ์ค์๊ฐ ํ์ํฉ๋๋ค.
- ์ฅํฉํจ: ํด๋์ค ์ด๋ฆ์ด ๊ธธ์ด์ง ์ ์์ต๋๋ค.
4. ํ๋ ์์ํฌ๋ณ ์ ๊ทผ ๋ฐฉ์
๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ๋ ์คํ์ผ ์บก์ํ ๋ฐ ์ปดํฌ๋ํธ ์คํ์ผ๋ง์ ์ํ ์์ฒด ์๋ฃจ์ ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ ์ข ์ข CSS ๋ชจ๋์ ์ฌ์ฉํ๊ฑฐ๋ ์ปดํฌ๋ํธ ๋ด์์ ๋ฒ์๊ฐ ์ง์ ๋ ์คํ์ผ์ ํ์ฉํ๋ ๋ฑ ์์์ ์ธ๊ธํ ๊ธฐ์ ๋ค์ ์ธก๋ฉด์ ๊ฒฐํฉํฉ๋๋ค. ์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- React: Styled Components, CSS ๋ชจ๋ (Create React App๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ํตํด), ๊ทธ๋ฆฌ๊ณ ๋ค๋ฅธ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์คํ์ผ ๋ฒ์๋ฅผ ์ง์ ํ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
- Vue.js: ๋จ์ผ ํ์ผ ์ปดํฌ๋ํธ(SFC)๋ `scoped` ์์ฑ์ ์ฌ์ฉํ์ฌ ๊ฐ ์ปดํฌ๋ํธ์ `<style>` ํ๊ทธ ๋ด์์ ์ง์ ๋ฒ์๊ฐ ์ง์ ๋ ์คํ์ผ์ ํ์ฉํฉ๋๋ค.
- Angular: ์ปดํฌ๋ํธ ์คํ์ผ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ปดํฌ๋ํธ์ ์ ํ์๋ฅผ ์ ๋์ฌ๋ก ์ฌ์ฉํ์ฌ ๊ฒฉ๋ฆฌ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค. ViewEncapsulation ๊ธฐ๋ฅ์ ์คํ์ผ ์บก์ํ๋ฅผ ์ํ ์ฌ๋ฌ ์ต์ ์ ์ ๊ณตํฉ๋๋ค.
CSS ๋ฒ์ ๊ท์น์ ์ํ ๋ชจ๋ฒ ์ฌ๋ก
CSS ๋ฒ์ ๊ท์น์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ญ์์ค:
- ์ฌ๋ฐ๋ฅธ ๊ธฐ์ ์ ํ: ํ๋ก์ ํธ์ ์๊ตฌ ์ฌํญ์ ๊ฐ์ฅ ์ ํฉํ ๋ฐฉ๋ฒ์ ์ ํํ์ญ์์ค. ์๋ฅผ ๋ค์ด, ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์น ์ปดํฌ๋ํธ๋ฅผ ๊ตฌ์ถํ๋ ๊ฒฝ์ฐ Shadow DOM์ด ๊ฐ๋ ฅํ ์ ํ์ ๋๋ค. CSS ๋ชจ๋์ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ํ๋ ์์ํฌ์ ์ ์๋ํ๋ฉฐ, ๊ฐ๋ ฅํ ๋ค์ด๋ฐ ์ปจ๋ฒค์ ์ ํ๋ ์์ํฌ ์ ํ์ ๋ ๊ตฌ์ ๋ฐ๋ ํ๋ก์ ํธ์ ์ข์ต๋๋ค.
- ์ผ๊ด์ฑ์ด ํต์ฌ์ ๋๋ค: ์ ํํ ์ ๊ทผ ๋ฐฉ์์ ํ๋ก์ ํธ ์ ์ฒด์ ์ผ๊ด๋๊ฒ ์ ์ฉํ์ญ์์ค.
- ์ ๊ทผ ๋ฐฉ์ ๋ฌธ์ํ: ์คํ์ผ๋ง ์ ๋ต๊ณผ ์ฌ์ฉ๋ ํน์ ํจํด ๋๋ ์ปจ๋ฒค์ ์ ๋ช ํํ๊ฒ ๋ฌธ์ํํ์ญ์์ค. ์ด๋ ์๋ก ๋ค๋ฅธ ์๊ฐ๋์์ ์์ ํ๋ ๋๊ท๋ชจ ๊ธ๋ก๋ฒ ํ์๊ฒ ๋งค์ฐ ์ค์ํฉ๋๋ค.
- ๋น๋ ๋๊ตฌ ๊ณ ๋ ค: ๋น๋ ๋๊ตฌ(Webpack, Parcel ๋ฑ)๋ฅผ ํ์ฉํ์ฌ ๊ณ ์ ํ ํด๋์ค ์ด๋ฆ ์์ฑ ๋๋ Shadow DOM ์ฒ๋ฆฌ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ์ญ์์ค.
- ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ์ํคํ ์ฒ ์์ฉ: UI๋ฅผ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ ์งํฉ์ผ๋ก ์ค๊ณํ์ญ์์ค. ์ด๋ ์คํ์ผ ์บก์ํ๋ฅผ ๋ ํจ๊ณผ์ ์ผ๋ก ๋ง๋๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- CSS ์ฌ์ฉ์ ์ง์ ์์ฑ(๋ณ์) ์ฌ์ฉ: ์ ์ญ ์คํ์ผ๋ง ๋ฐ ํ ๋ง ์ค์ ์ ์ํด CSS ์ฌ์ฉ์ ์ง์ ์์ฑ(๋ณ์)์ ํ์ฉํ์ฌ ์คํ์ผ ๊ฒฉ๋ฆฌ๋ฅผ ๊นจ์ง ์๊ณ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ ์ ์ญ ์คํ์ผ ์ํธ์์ ์ ์ด๋ ์ฌ์ฉ์ ์ ์๋ฅผ ํ์ฉํ์ญ์์ค.
- ์ฌ์ฉ์ ์ ์ ๊ณํ: Shadow DOM ๋๋ ๋ค๋ฅธ ์บก์ํ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ๋, ์ํ ๊ฒฝ์ฐ ์ปดํฌ๋ํธ ์คํ์ผ์ ์ฌ์ฉ์ ์ ์ํ ์ ์๋ ๋ช ํํ ๋ฐฉ๋ฒ์ ์ ๊ณตํ์ญ์์ค. ์ฌ๊ธฐ์๋ CSS ์ฌ์ฉ์ ์ง์ ์์ฑ์ ์ ๊ณตํ๊ฑฐ๋ `::part`์ ์ ์๋ฅผ ํ์ฉํ๋ ๊ฒ์ด ํฌํจ๋ ์ ์์ต๋๋ค.
- ํ ์คํธ๋ ๊ฐ์ฅ ์ค์ํฉ๋๋ค: ์๋ํ๋ ํ ์คํธ๋ฅผ ๋ง๋ค์ด ์คํ์ผ์ด ์๋ํ ๋๋ก ์๋ํ๊ณ ํ๋ก์ ํธ๊ฐ ๋ฐ์ ํจ์ ๋ฐ๋ผ ์๋ํ์ง ์์ ๋ถ์์ฉ์ ์ผ์ผํค์ง ์๋๋ก ๋ณด์ฅํ์ญ์์ค.
์์ ์๋๋ฆฌ์ค: ๋ค๊ตญ์ด ์น์ฌ์ดํธ
์์ด, ์คํ์ธ์ด, ์ผ๋ณธ์ด์ ๊ฐ์ด ์ฌ๋ฌ ์ธ์ด๋ฅผ ์ง์ํ๋ ๊ธ๋ก๋ฒ ์ด์ปค๋จธ์ค ์น์ฌ์ดํธ๋ฅผ ์์ํด ๋ณด์ญ์์ค. CSS ๋ชจ๋๊ณผ ๊ฐ์ CSS ๋ฒ์ ๊ท์น์ ํ์ฉํ๋ฉด ๋ค์์ ๋ณด์ฅํ๋ ๋ฐ ๋งค์ฐ ์ ์ฉํ ๊ฒ์ ๋๋ค:
- ์ผ๋ณธ์ด ์ปดํฌ๋ํธ์ ์คํ์ผ์ ๊ฒฉ๋ฆฌ๋์ด ํ์ด์ง์ ์์ด ๋๋ ์คํ์ธ์ด ํ ์คํธ์ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
- ์ผ๋ณธ์ด ํ ์คํธ์ ํน์ ํ ๊ธ๊ผด ์คํ์ผ์ด๋ ๋ ์ด์์ ๋ณ๊ฒฝ(์: ๋ค๋ฅธ ์๊ฐ ๋๋ ์ค ๋์ด)์ด ์ฌ์ดํธ์ ๋ค๋ฅธ ์น์ ์ ์ํฅ์ ๋ฏธ์น์ง ์์ต๋๋ค.
- ์ผ๋ณธ์ ๊ฐ๋ฐ์๊ฐ ์คํ์ผ์ ์ ๋ฐ์ดํธํ ๋, ํด๋น ๋ณ๊ฒฝ ์ฌํญ์ด ๋ค๋ฅธ ์ธ์ด ์ฝํ ์ธ ์ ๋ชจ์์ ์ํฅ์ ๋ฏธ์น์ง ์์์ ๋ณด์ฅ๋ฐ์ผ๋ฉฐ, ์ ์ธ๊ณ ๋ค๋ฅธ ์ง์ญ์์ ์์ ํ๋ ๊ฐ๋ฐ์๋ ์ผ๋ณธ์ด ์ฌ์ดํธ์ ์ํฅ์ ๋ฏธ์น๋ ํ๊ท(regression)์ ๋ํด ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค.
CSS ๋ฒ์ ๊ท์น์ ์ด์ : ๊ธ๋ก๋ฒ ๊ด์
CSS ๋ฒ์ ๊ท์น์ ์ฑํํ๋ฉด ๋ชจ๋ ๊ท๋ชจ์ ์น ๊ฐ๋ฐ ํ๋ก์ ํธ, ํนํ ๊ธ๋ก๋ฒ ๋งฅ๋ฝ์์ ์๋นํ ์ด์ ์ ์ป์ ์ ์์ต๋๋ค:
- ํฅ์๋ ์ ์ง๋ณด์์ฑ: ํ ๊ท๋ชจ๋ ์์น์ ๊ด๊ณ์์ด ์คํ์ผ์ ๋ ์ฝ๊ฒ ์ดํด, ์์ ๋ฐ ๋๋ฒ๊น ํ ์ ์์ต๋๋ค.
- ํฅ์๋ ํ์ : ์คํ์ผ ์ถฉ๋์ด ์ค์ด๋ค๊ณ ๊ฐ๋ฐ์ ๊ฐ์ ์ํต์ด ๊ฐ์ ๋ฉ๋๋ค. ๋ค๋ฅธ ์์น์์ ์์ ํ๋ ํ์ด ๋์ผํ ์ฝ๋๋ฒ ์ด์ค์์ ๋ ์ฝ๊ฒ ํ์ ํ ์ ์์ต๋๋ค.
- ํฅ์๋ ํ์ฅ์ฑ: ํ๋ก์ ํธ๊ฐ ์ทจ์ฝํด์ง์ง ์์ผ๋ฉด์ ์ฝ๊ฒ ์ ์ํ๊ณ ํ์ฅํ ์ ์์ต๋๋ค.
- ์ค๋ฅ ์ํ ๊ฐ์: ์๊ฐ์ ๋ฒ๊ทธ๋ ์๋ํ์ง ์์ ๋ถ์์ฉ์ ๋์ ํ ๊ฐ๋ฅ์ฑ์ ์ต์ํํ์ฌ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํฉ๋๋ค.
- ํฅ์๋ ์ฌ์ฌ์ฉ์ฑ: ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ๋ฅผ ์์ ์๊ฒ ๋ง๋ค์ด ์ฌ๋ฌ ํ๋ก์ ํธ์์ ๊ณต์ ํ ์ ์์ต๋๋ค.
- ์ฑ๋ฅ ํฅ์: ๋ฒ์ ์ง์ ์ ํตํด ๊ตฌํ๋ ์ ๊ตฌ์กฐํ๋ CSS ์ ๋ต์ ๋ ํจ์จ์ ์ธ ๋ ๋๋ง๊ณผ ํ์ผ ํฌ๊ธฐ ๊ฐ์๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
๊ฒฐ๋ก : ๋ ๋์ ์น์ ์ํ ์คํ์ผ ์บก์ํ ์์ฉ
CSS ๋ฒ์ ๊ท์น์ ๊ฒฌ๊ณ ํ๊ณ , ์ ์ง๋ณด์ ๊ฐ๋ฅํ๋ฉฐ, ํ์ฅ ๊ฐ๋ฅํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ ๋ฐ ํ์์ ์ ๋๋ค. CSS ๋ชจ๋, Shadow DOM, CSS ๋ค์ด๋ฐ ์ปจ๋ฒค์ ๊ณผ ๊ฐ์ ๊ธฐ์ ์ ์์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ํจ๊ณผ์ ์ผ๋ก ์คํ์ผ์ ์บก์ํํ๊ณ , ์ถฉ๋์ ๋ฐฉ์งํ๋ฉฐ, ๋ ์ฒด๊ณ์ ์ด๊ณ ํ์ ์ ์ธ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ง๋ค ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ์ ์ ๊ตฌํํ๋ฉด ์น ๊ฐ๋ฐ์๋ ์์น๋ ํ๋ก์ ํธ์ ๋ณต์ก์ฑ์ ๊ด๊ณ์์ด ํ๋ฅญํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.
์น์ด ๊ณ์ ๋ฐ์ ํจ์ ๋ฐ๋ผ CSS ๋ฒ์ ๊ท์น์ ๋ง์คํฐํ๋ ๊ฒ์ ์ ์ ๋ ์ค์ํด์ง ๊ฒ์ ๋๋ค. ๋ฐ๋ผ์ ์์ ๊ฐ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๋ ๋๊ท๋ชจ ๊ธ๋ก๋ฒ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๋ , ์ด๋ฌํ ์ ๊ทผ ๋ฐฉ์์ ์ํฌํ๋ก์ ํตํฉํ์ฌ ํจ์จ์ฑ์ ๋์ด๊ณ , ์ํ์ ์ค์ด๋ฉฐ, ๋ชจ๋๋ฅผ ์ํ ๋ ๋์ ์น์ ๊ตฌ์ถํ๋ ๊ฒ์ ๊ณ ๋ คํด ๋ณด์ญ์์ค.